<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对其属性【文本与图片对齐】</title>
	<!-- 垂直方向对象属性   vertical-align
	     使用方法 1.用于表格中单元格垂直局中
	             2.用于行内元素以及行内块元素的垂直居中
				 【文本和图片垂直居中（对齐）效果】
	             对其分为四种；基线对其，顶部对齐
	                   居中对其，底部对其
	        元素种类  块元素  行元素  行内块元素
			块元素特点；独占一行  设置宽高
			行元素特点；一行内显示  不可设置宽高
			网页；元素之间嵌套生成
			行元素与块元素可以任意嵌套
			前提；设置宽高*----行套块
	                     ----块套块
	-                     ---块套行
	           前提  --一行内显示---行套块
	                            --块套块
	                         -----块套行
		             ------行套行
			 -->  	
		<!-- 选择器--抓第一张图片 -->	 
			 思路   派生选择器   找后代+为类选择器
			 添加效果  p  img：nth-child(1)
		<style>
			p img:nth-child(1)
			/* vertical-align:baseline */
			
			
			
		p img:nth-child(1)	
			/* vertical-align:baseline  顶部对其 */
			vertical-align:top;
			width:500px;
			height:500px;
			background:red;
		</style>

			 
			 
	</head>
	<body>
		<!-- 需求结构  4个P,嵌套文字；图片叫什么名字
						   文字后加img 设定宽高  ；25-100px
						   每个图片后面加    基线对其  顶部对其
							  居中对其  底部对其
							  -->
		<h1>文本与图片垂直属性</h1>
		<p>文本<img src="img/1.jpg" alt="劳1" width="100px" height="100px"
		/>基线对齐</p>
		<p>文本<img src="img/2.jpg" alt="劳2" width="100px" height="100px"
		/>顶部对齐</p>
		<p>文本<img src="img/3.png" alt="劳3" width="100px" height="100px"
		/>居中对齐</p>
		<p>文本<img src="img/1.jpg" alt="劳1" width="100px" height="100px"
		/>底部对齐</p>
		<!-- css选择器   抓第一张 -->
	</body>
</html


























































